import React, { Component } from 'react'
// 面试题: 修改state 数据的两种方式的区别?
// 对象方式

// 函数方式

// 当在事件处理函数中, 使用对象修改, react 为了节省性能会将多次修改合并成一次修改,
// 在合并的过程中, 如果是对象形式, 对象合并, 相同key会覆盖, 最终只保留最后一次的key
// 如果是函数形式, 会将所有的函数放在一个数组中, 循环调用执行, 最后调用几次修改几次

export default class Father extends Component {
    state = {
        count: 100
    }
    // 对象形式
    addCountFn() {
        this.setState({
            count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })
    }
    // 函数形式
    addCountFn1() {
        this.setState((state) => {
            return {
                count: state.count + 1
            }
        })
        this.setState((state) => {
            return {
                count: state.count + 1
            }
        })
        this.setState((state) => {
            return {
                count: state.count + 1
            }
        })
    }
    render() {
        return (
            <div>
                <p>count:{this.state.count}</p>
                <p>
                    <button onClick={() => this.addCountFn()}>对象方式修改</button>
                    <button onClick={this.addCountFn1.bind(this)}>函数方式修改</button>
                </p>
            </div>
        )
    }
}
